<template>
  <div style="width: 100%; height: 100%; background-color: #fff">
    <a-row style="height: 100%">
      <a-col :span="4" style="height: 100%">
        <a-card
          title="终端列表"
          :body-style="{ height: 'calc( 100% - 50px )', padding: '5px' }"
          style="margin-right: 10px; height: 100%"
          size="small"
        >
          <s-scroll style="height: 100%">
            <a-tree
              :checkable="false"
              class="server"
              :selected-keys="serverCheckedKeys"
              :tree-data="servers"
              :field-names="{
                children: 'children',
                title: 'title',
                key: 'id'
              }"
              block-node
              @select="serverSelect"
            >
              <template #title="{ dataRef }"> {{ dataRef.title }}({{ dataRef.ip }}) </template>
            </a-tree>
          </s-scroll>
        </a-card>
      </a-col>
      <a-col :span="20">
        <a-empty v-if="terminals.length == 0" />
        <a-tabs
          v-else
          :active-key="current"
          class="tab-terminals"
          style="height: 100%"
          type="card"
          size="small"
          :tab-bar-style="{ margin: 0 }"
          @change="(e) => (serverCheckedKeys = [e])"
        >
          <a-tab-pane v-for="item in terminals" :key="item.id" force-render style="height: 100%">
            <template #tab>
              <template v-if="item.status == 'connecting'">
                <s-icon type="thunderbolt-filled" style="color: yellow"></s-icon>
              </template>
              <template v-if="item.status == 'connected'">
                <s-icon type="thunderbolt-filled" style="color: green"></s-icon>
              </template>
              <template v-if="item.status == 'closed'">
                <s-icon type="thunderbolt-filled" style="color: gray"></s-icon>
              </template>
              {{ item.title }}
              <s-icon type="close-outlined" @click="closeTerminal(item.id)"></s-icon>
            </template>
            <terminal
              :id="item.id"
              ref="terminalRef"
              @statusChange="(s) => (item.status = s)"
            ></terminal>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
  </div>
</template>
<script setup lang="ts">
import '@/style/colors.less'
import { getCurrentInstance, ref } from 'vue'
import Terminal from './Terminal.vue'
const terminals = ref([])
const servers = ref([])
const serverCheckedKeys = ref([])
const current = ref(null)
const terminalRef = ref(null)
const context = getCurrentInstance()?.appContext.config.globalProperties
const serverSelect = (selectedKeys, e) => {
  if (selectedKeys.length > 0) {
    serverCheckedKeys.value = selectedKeys
    const id = selectedKeys[0]
    if (current.value !== id) {
      const node = e.node.dataRef
      const r = terminals.value.find((v) => v.id == id)
      if (r) {
        current.value = id
      } else {
        terminals.value.push({
          id: id,
          title: node.title,
          status: 'connecting'
        })
        current.value = id
      }
    }
  }
}
const closeTerminal = (id) => {
  if (current.value == id) {
    for (let p = 0; p < terminals.value.length; p++) {
      if (terminals.value[p].id === id) {
        if (terminals.value.length > 1) {
          let index = p
          if (index >= 1) {
            index = index - 1
          }
          current.value = terminals.value[index].id
          serverCheckedKeys.value = [terminals.value[index].id]
        } else {
          current.value = null
          serverCheckedKeys.value = []
        }
        terminals.value.splice(p, 1)
        break
      }
    }
  }
}
context.$api.GET('/toolkit/remoteServer/allList').then((res) => {
  if (res.data) {
    res.data.forEach((item) => {
      servers.value.push({
        ip: item.ip,
        title: item.name,
        id: item.id
      })
    })
  }
})
</script>
<style scoped>
.tab-terminals:deep(.ant-tabs-content-holder) {
  height: 100%;
}
.tab-terminals:deep(.ant-tabs-content) {
  height: 100%;
}
.checked {
  background-color: var(--skrivet-primary-color);
}
.server:deep(span.ant-tree-switcher) {
  width: 0px;
}
</style>
